<template>
  <div class="voice-instruction-container">
    <div class="instruction-header">
      <span class="title">语音指令</span>
      <t-switch v-model="useInstructions" size="small" />
    </div>

    <div v-if="useInstructions" class="instruction-content">
      <div class="template-selection">
        <t-select
          v-model="selectedTemplate"
          placeholder="选择预设模板"
          @change="handleTemplateChange"
          clearable
        >
          <t-option
            v-for="template in instructionTemplates"
            :key="template.id"
            :value="template.id"
            :label="template.name"
          >
            {{ template.name }}
          </t-option>
        </t-select>
      </div>

      <div class="instruction-editor">
        <t-textarea
          v-model="instructionText"
          placeholder="在此输入自定义语音指令，例如：'Voice Affect: 热情活泼; Tone: 兴奋愉快; Pacing: 语速快而有力...'"
          :autosize="{ minRows: 3, maxRows: 8 }"
        />
      </div>

      <div class="instruction-tips">
        <t-collapse>
          <t-collapse-panel value="tips" header="语音指令提示">
            <div class="tips-content">
              <p>语音指令可以包含以下几个方面：</p>
              <ul>
                <li><b>Voice Affect:</b> 语音的整体特性，如活泼、平静、严肃等</li>
                <li><b>Tone:</b> 语调，如兴奋、专业、友好等</li>
                <li><b>Pacing:</b> 语速和节奏，如快速、缓慢、有节奏的等</li>
                <li><b>Emotion:</b> 情感表达，如快乐、激动、平静等</li>
                <li><b>Personality:</b> 个性特点，如亲切、权威、幽默等</li>
                <li><b>Pauses:</b> 停顿的使用，如重点处短暂停顿等</li>
              </ul>
            </div>
          </t-collapse-panel>
        </t-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineProps, defineEmits } from 'vue';
import { getVoiceInstructionTemplates } from '@renderer/api/ttsApi';

const props = defineProps({
  modelType: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:instructions']);

// 状态
const useInstructions = ref(false);
const instructionText = ref('');
const selectedTemplate = ref('');
const instructionTemplates = ref([]);

// 是否显示指令面板（仅对支持指令的模型显示）
const isInstructionSupported = () => {
  return props.modelType === 'gpt-4o-mini-tts';
};

// 加载指令模板
const loadInstructionTemplates = async () => {
  try {
    const templates = await getVoiceInstructionTemplates();
    instructionTemplates.value = templates;
  } catch (error) {
    console.error('加载语音指令模板失败:', error);
  }
};

// 处理模板选择
const handleTemplateChange = (templateId) => {
  if (!templateId) {
    instructionText.value = '';
    return;
  }

  const template = instructionTemplates.value.find(t => t.id === templateId);
  if (template) {
    instructionText.value = template.template;
  }
};

// 监听指令变化，向父组件发出更新
watch([useInstructions, instructionText], () => {
  if (useInstructions.value && instructionText.value) {
    emit('update:instructions', instructionText.value);
  } else {
    emit('update:instructions', null);
  }
});

// 监听模型类型变化
watch(() => props.modelType, (newModelType) => {
  if (!isInstructionSupported()) {
    useInstructions.value = false;
  }
});

onMounted(() => {
  loadInstructionTemplates();
});
</script>

<style lang="less" scoped>
.voice-instruction-container {
  margin-top: 16px;
  padding: 16px;
  background-color: #f5f5f5;  // 深色背景改为浅灰色
  border-radius: 4px;
  border: 1px solid #e0e0e0;  // 深色边框改为浅灰色
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  // 添加轻微阴影增强立体感
  margin-bottom: 10px;

  .instruction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-weight: 500;
      color: #333333;  // 白色文字改为深灰色
    }
  }

  .instruction-content {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .template-selection {
      :deep(.t-select) {
        width: 100%;
        --td-bg-color-specialcomponent: #ffffff;  // 深色背景改为白色
        --td-text-color-primary: #333333;  // 白色文字改为深灰色
        --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色

        .t-select__input {
          background-color: #ffffff;
          border-color: #e0e0e0;

          &:hover, &:focus {
            border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
          }
        }

        &:focus-within {
          box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加聚焦时的轻微蓝色阴影
        }
      }
    }

    .instruction-editor {
      :deep(.t-textarea) {
        width: 100%;
        --td-bg-color-specialcomponent: #ffffff;  // 深色背景改为白色
        --td-text-color-primary: #333333;  // 白色文字改为深灰色
        --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色

        textarea {
          background-color: #ffffff;
          border-color: #e0e0e0;

          &:hover, &:focus {
            border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
          }
        }

        &:focus-within {
          box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加聚焦时的轻微蓝色阴影
        }
      }
    }

    .instruction-tips {
      :deep(.t-collapse) {
        background-color: transparent;
        border: none;

        .t-collapse__panel {
          border: 1px solid #e0e0e0;  // 深色边框改为浅灰色
          border-radius: 4px;
          overflow: hidden;  // 确保圆角正确显示

          .t-collapse__panel-header {
            background-color: #f5f5f5;  // 深色背景改为浅灰色
            color: #333333;  // 白色文字改为深灰色
            font-weight: 500;  // 加粗标题，增强可读性
          }

          .t-collapse__panel-content {
            background-color: #ffffff;  // 深色背景改为白色
            padding: 16px;
            color: rgba(0, 0, 0, 0.8);  // 半透明白色改为半透明黑色
            border-top: 1px solid #e0e0e0;  // 添加顶部边框，增强视觉分隔
          }
        }
      }

      .tips-content {
        font-size: 12px;

        ul {
          padding-left: 16px;
          margin-top: 8px;

          li {
            margin-bottom: 4px;  // 添加列表项间距，提高可读性
            color: rgba(0, 0, 0, 0.7);  // 设置合适的文本颜色
          }
        }
      }
    }
  }
}
</style>
